<!DOCTYPE html>
<html lang="en" class="box">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jquery源码解析视频75-1</title>
    <script src="../jquery-2.0.3.js"></script>
  </head>

  <body class="box">
    <!-- <div>div1</div>
    <p>p</p>
    <div id="div1">div1</div>
    <div>div1</div> -->

    <!-- <div>div1<span>span</span></div>
    <div>div1<span id="span1">span</span></div>
    <div>div1<span>span</span></div> -->

    <!-- <div id="div1" class="box">
      aaaaaa
      <div id="div2" class="box">bbbbb</div>
    </div> -->
    <div id="div1">
      aaaaaa
      <div id="div2">bbbbb</div>
    </div>

    <script>
      $(function () {
        // console.log($("#div1").index());
        // console.log($("#span1").index());
        // console.log($("#span1").index("span")); // 1
        // 对应源码
        // index in selector
        // if ( typeof elem === "string" ) {
        //   return core_indexOf.call( jQuery( elem ), this[ 0 ] );
        // }
        // 另一种写法，两种方式结果一样
        // console.log($("span").index($("#span1"))); // 1
        // 对应源码
        // Locate the position of the desired element
        // return core_indexOf.call( this,
        //     // If it receives a jQuery object, the first element is used
        //     elem.jquery ? elem[ 0 ] : elem
        // );

        // closest()：找最近元素的接点，查找包括自身
        // $("#div2").closest(".box").css("border","1px solid red");
        // $("#div2").closest(".box").css("border","1px solid red");
        // $("#div2").closest(".box").css("border","1px solid red");
       // 限制选择范围
       $("#div2").closest(".box", $('body').get(0)).css('border','1px solid red');  



      });
    </script>
  </body>
</html>
